<template>
	<div class="zuopinliebiao">
		<div class="shouye_tou1">
			<span>作品列表</span>
		</div>
		
		<div class="zuiwaiceng">
			<div class="zuopin">
				<div class="zuopin1">
					<span>作品类型</span>
					<ul>
						<li>全部</li>
						<li>带货作品</li>
					</ul>
				</div>
				<div class="zuopin2">
					<span>发布时间</span>
					<ul>
						<li>近7天</li>
						<li>近30天</li>
						<li>近90天</li>
					</ul>
				</div>
				<div class="zuopin3">
					<el-date-picker
					  v-model="value2"
					  type="daterange"
					  align="right"
					  unlink-panels
					  range-separator="至"
					  start-placeholder="开始日期"
					  end-placeholder="结束日期"
					  :picker-options="pickerOptions">
					</el-date-picker>
				</div>
			</div>
			
			<div class="zuopinsou">
				<div class="zuopinsou1">
					<div class="zuopinsou1_1">
						<input type="search" value="" placeholder="请输入作品关键词" />
						<span>
							<i class="el-icon-search"></i>
						</span>
					</div>
				</div>
				<div class="zuopinsou2">
					<ul>
						<li>按时间</li>
						<li>按点赞</li>
						<li>按评论</li>
						<li>按分享</li>
					</ul>
					<span>
						<i v-loading.fullscreen.lock="fullscreenLoading" @click="xiazai" class="el-icon-sold-out"></i>导出
					</span>
				</div>
			</div>
			
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>作品</th>
						<th>点赞数</th>
						<th>评论数</th>
						<th>分享数</th>
						<th>时长</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in zuolie" :key="index">
						<td>
							<div class="xiangcaozuo">
								<div class="xiangcaozuo1">
									<img :src="item.img" />
								</div>
								<div class="xiangcaozuo2">
									<p>{{item.title}}</p>
									<p>发布时间：{{item.time}}</p>
								</div>
							</div>
						</td>
						<td>
							{{item.dianzan | guolv}}
						</td>
						<td>
							{{item.pinglun | guolv}}
						</td>
						<td>
							{{item.fenxiang | guolv}}
						</td>
						<td>
							{{item.shichang}}
						</td>
						<td>
							<img src="../../../../assets/img/aixin1.png" />
							<img src="../../../../assets/img/xindian.png" />
						</td>
					</tr>
				</tbody>
			</table>
			
			<div class="fenye" style="text-align: center;">
				<el-pagination
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :hide-on-single-page="yindi"
				  :current-page="currentPage4"
				  :page-sizes="[100, 200, 300, 400]"
				  :page-size="100"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="4001">
				</el-pagination>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default{
		name:'zuopinliebiao',
		data(){
			return{
				shu:46322,
				//日期选择器
				pickerOptions: {
				  shortcuts: [{
					text: '最近一周',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', [start, end]);
					}
				  }, {
					text: '最近一个月',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					  picker.$emit('pick', [start, end]);
					}
				  }, {
					text: '最近三个月',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					  picker.$emit('pick', [start, end]);
					}
				  }]
				},
				value1: '',
				value2: '',
				
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
				fullscreenLoading:false,
				column:[
					{title:'作品图',key:'img',type:'image',width:150,height:100},
					{title:'作品标题',key:"title",type:'text'},
					{title:"发布时间",key:"time",type:'text'},
					{title:'点赞数',key:'dianzan',type:'text'},
					{title:'评论数',key:'pinglun',type:'text'},
					{title:'分享数',key:'fenxiang',type:'text'},
					{title:'时长',key:'shichang',type:'text'}
				],
				zuolie:[
					{
						title:'老爸和老弟的绝望周末结束了老爸和老弟的绝望周末结束了老爸和老弟的绝望周末结束了',
						img:'https://www.koltuita.com/wxxcx/img/val1.png',
						time:'2020-10-31 11:01:00',
						dianzan:'2343456232',
						pinglun:"856398232",
						fenxiang:'834582348',
						shichang:'00.02.12'
					},
					{
						title:'老爸和老弟的绝望周末结束了老爸和老弟的绝望周末结束了老爸和老弟的绝望周末结束了',
						img:'https://www.koltuita.com/wxxcx/img/val3.png',
						time:'2020-10-31 11:01:00',
						dianzan:'807457634',
						pinglun:"235343",
						fenxiang:'634523',
						shichang:'00.02.12'
					},
					{
						title:'老爸和老弟的绝望周末结束了老爸和老弟的绝望周末结束了老爸和老弟的绝望周末结束了',
						img:'https://www.koltuita.com/wxxcx/img/val2.png',
						time:'2020-10-31 11:01:00',
						dianzan:'78947',
						pinglun:"563453",
						fenxiang:'234234',
						shichang:'00.02.12'
					},
					{
						title:'老爸和老弟的绝望周末结束了老爸和老弟的绝望周末结束了老爸和老弟的绝望周末结束了',
						img:'https://www.koltuita.com/wxxcx/img/val4.png',
						time:'2020-10-31 11:01:00',
						dianzan:'1234',
						pinglun:"7645",
						fenxiang:'34534',
						shichang:'00.02.12'
					},
					{
						title:'老爸和老弟的绝望周末结束了老爸和老弟的绝望周末结束了老爸和老弟的绝望周末结束了',
						img:'https://www.koltuita.com/wxxcx/img/val3.png',
						time:'2020-10-31 11:01:00',
						dianzan:'897684564',
						pinglun:"34653454",
						fenxiang:'734563',
						shichang:'00.02.12'
					}
				]
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		mounted(){
			
			$(".zuopinsou2 ul li").click(function(){
				$(this).css({
					'color': '#fff',
					'background-color': '#0091FF',
				})
				$(this).siblings().css({
					'color': '#999',
					'background-color': '#fff',
				})
			})
			$(".zuopin2 ul li").click(function(){
				$(this).css({
					'color': '#fff',
					'background-color': '#0091FF',
				})
				$(this).siblings().css({
					'color': '#999',
					'background-color': '#fff',
				})
			})
			$(".zuopin1 ul li").click(function(){
				$(this).css({
					'color': '#fff',
					'background-color': '#0091FF',
				})
				$(this).siblings().css({
					'color': '#999',
					'background-color': '#fff',
				})
			})
		},
		methods:{
			//分页
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			
			//数据导出excel表格
			xiazai(){
				this.fullscreenLoading = true;
				setTimeout(() => {
					this.fullscreenLoading = false;
					this.$message.success("数据导出成功！")
					
					this.table2excel(this.column,this.zuolie,"作品列表")
				}, 2000);
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.zuopinliebiao{
		background-color: #fff;
		padding: 0.6rem 1.5rem;
		border-radius:0.1rem ;
		
		.shouye_tou1{
			height: 100%;
			box-sizing: border-box;
			position: relative;
			margin-bottom:0.8rem ;
			
			span{
				font-weight: 600;
				font-size: 0.5rem;
				display: inline-block;
				margin-left:0.8rem ;
				margin-top:0.8rem ;
			}
			
			span::before{
				content: "";
				display: block;
				position: absolute;
				top: 0.6rem;
				left: 0;
				width: 0.3rem;
				height: 1rem;
				background-color: #1890FF;
			}
		}
		
		.zuiwaiceng{
			padding: 0 1rem;
			
			.zuopin{
				margin: 1rem 0;
				display: flex;
				align-items: center;
				
				.zuopin1{
					display: flex;
					align-items: center;
					span{
						color: #333333;
						font-size: 0.4rem;
						display: block;
					}
					ul{
						list-style: none;
						margin-left:0.8rem ;
						
						li{
							cursor: pointer;
							float: left;
							color: #999999;
							font-size: 0.4rem;
							padding: 0.1rem 0.3rem;
							border-radius:0.05rem ;
							margin-right:0.4rem ;
						}
						li:nth-of-type(1){
							color: #fff;
							background-color: #0091FF;
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
						
					}
				}
				.zuopin2{
					display: flex;
					align-items: center;
					margin-left:3rem ;
					span{
						color: #333333;
						font-size: 0.4rem;
						display: block;
					}
					ul{
						list-style: none;
						margin-left:0.8rem ;
						
						li{
							cursor: pointer;
							float: left;
							color: #999999;
							font-size: 0.4rem;
							padding: 0.1rem 0.3rem;
							border-radius:0.05rem ;
							margin-right:0.4rem ;
						}
						li:nth-of-type(1){
							color: #fff;
							background-color: #0091FF;
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
						
					}
				}
				.zuopin3{
					margin-left:3rem ;
					margin-top:-0.4rem ;
				}
			}
			
			.zuopinsou{
				
				.zuopinsou1{
					float: left;
					
					.zuopinsou1_1{
						border: 1px solid #D4D4D4;
						display: flex;
						align-items: center;
						input{
							outline: none;
							height: 0.8rem;
							padding:0 0.3rem ;
							font-size: 0.4rem;
							border:none ;
						}
						input::placeholder{
							color: #D4D4D4;
							font-size: 0.35rem;
						}
						span{
							cursor: pointer;
							display: flex;
							font-size: 0.5rem;
							color: #666666;
							padding: 0 0.4rem;
						}
					}
				}
				.zuopinsou2{
					float: right;
					display: flex;
					align-items: center;
					
					ul{
						border: 1px solid #D4D4D4;
						border-radius: 0.1rem;
						list-style: none;
						
						li{
							cursor: pointer;
							float: left;
							color: #0091FF;
							font-size: 0.4rem;
							padding: 0.1rem 0.3rem;
							border-right:1px solid #D4D4D4;
						}
						li:nth-of-type(1){
							background-color: #0091FF;
							color: #fff;
							border-top-left-radius:0.1rem ;
							border-bottom-left-radius:0.1rem ;
						}
						li:last-child{
							border-top-right-radius:0.1rem ;
							border-bottom-right-radius:0.1rem ;
							border-right:none ;
						}
					}
					
					span{
						color: #999;
						border: 1px solid #D4D4D4;
						margin-left:0.8rem ;
						border-radius:0.1rem ;
						cursor: pointer;
						font-size: 0.4rem;
						display: flex;
						align-items: center;
						padding: 0.1rem 0.3rem;
						
						i{
							font-size: 0.5rem;
							margin-right:0.3rem ;
						}
					}
					span:hover{
						color: #fff;
						background-color: #0091FF;
					}
					
				}
			}
			.zuopinsou::after{
				content: "";
				display: block;
				clear: both;
			}
			
			table{
				width: 100%;
				
				th{
					color: #333333;
					font-size: 0.45rem;
					padding:1.5rem 0;
					font-weight: normal;
				}
				th:nth-of-type(1){
					text-align: left;
					width: 16rem;
				}
				td{
					padding: 0.8rem 0;
					color: #666666;
					text-align: center;
					font-size: 0.45rem;
				}
				td:nth-of-type(1){
					.xiangcaozuo{
						display: flex;
						
						.xiangcaozuo1{
							img{
								width: 4rem;
								height: 2.5rem;
							}
						}
						.xiangcaozuo2{
							text-align: left;
							padding: 0.2rem 0;
							padding-left:0.4rem ;
							p:nth-of-type(1){
								width: 11rem;
								color: #333333;
								font-size: 0.45rem;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
							p:nth-of-type(2){
								font-size: 0.4rem;
								margin-top:0.8rem ;
							}
						}
					}
				}
				td:last-child{
					img{
						cursor: pointer;
					}
					img:nth-of-type(1){
						margin-right:0.4rem ;
					}
				}
			}
		}
	}
</style>
